---
import "#/styles/marquee.css"
import type { NamedImage } from "#/lib/types.ts"

interface Props {
  title: string
  data: Array<NamedImage>
  reverse: boolean
}

const { title, data, reverse } = Astro.props
---

<section class="relative py-8">
  <!-- Fade overlay -->
  <div class="absolute inset-y-0 -left-1 w-24 bg-gradient-to-r from-black to-black/0 z-10"></div>
  <div class="absolute inset-y-0 -right-1 w-24 bg-gradient-to-l from-black to-black/0 z-10"></div>

  <div class:list={["marquee", { "marquee--reverse": reverse }]}>
    <div class="marquee__group">
      {
        data.map((item) => (
          <div class="marquee__item">
            <img
              src={item.logo.src}
              class="grayscale"
              alt={item.name}
            />
          </div>
        ))
      }
    </div>

    <div
      aria-hidden="true"
      class="marquee__group"
    >
      {
        data.map((item) => (
          <div class="marquee__item">
            <img
              src={item.logo.src}
              class="grayscale"
              alt={item.name}
            />
          </div>
        ))
      }
    </div>
  </div>
</section>
